<template>
  <div class="app-container">
    <el-drawer :wrapperClosable="false" :close-on-press-escape="false" title="产品详情" @closed="close" :visible.sync="open" size="50%" append-to-body>
      <el-table v-loading="loading" :data="dinPayList">
        <el-table-column label="产品" align="center" prop="name"></el-table-column>
        <el-table-column label="计算类型" align="center" prop="calcType"></el-table-column>
        <el-table-column label="状态" align="status" prop="calcType">
          <template slot-scope="{ row }">
            <span v-if="row.status === 3">未开通</span>
            <span v-else-if="row.status === 1">开通成功</span>
            <span v-else>其它</span>
          </template>
        </el-table-column>

        <el-table-column label="操作"  fixed="right" width="200" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              v-if="scope.row.status === 3"
              icon="el-icon-more-outline"
              @click="submit(scope.$index,scope.row)"
            >开通</el-button>
          </template>
        </el-table-column>

      </el-table>
    </el-drawer>
  </div>
</template>
<script>
import { transferDepositQuery, transferSettingQuery, transferSetting,transferDepositOpen } from '@/api/ecs/dinPay'

let isRefresh = false
export default {
  name: "DinPayProduct",
  props: {
    opens: {
      type: Boolean,
      default: false
    },
    formData: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      dinPayList:[{
        name:"转账充值产品",
        calcType:"比率收费",
        status:0,
      },{
        name:"代付产品-D0-对私",
        calcType:"比率收费",
        status:0,
        settlementCycle:"D0",
        cardType:"B2C",
      },{
        name:"代付产品-T1-对私",
        calcType:"比率收费",
        status:0,
        settlementCycle:"T1",
        cardType:"B2C",
      },{
        name:"代付产品-D0-对公",
        calcType:"比率收费",
        status:0,
        settlementCycle:"D0",
        cardType:"B2B",
      },{
        name:"代付产品-T1-对公",
        calcType:"比率收费",
        status:0,
        settlementCycle:"T1",
        cardType:"B2B",
      }],
      form:{receiveAmount:"",bankCardId:"",id:""},
      open:false,
      loading:false
    }
  },
  methods: {
    getDetail(){

      this.dinPayList.forEach((item,index)=>{
        this.loading = true;
        if (index === 0){
          this.handTransferDepositQuery(item);
        }else{
          let query = {
            cardType:item.cardType,
            settlementCycle:item.settlementCycle,
            subMerchantNo:this.form.subMerchantNo,
          }
          transferSettingQuery(query).then(res=>{
            this.loading = false;
            if(res.code === 200){
              let resData = res.data
              if (resData.code === "0000"){
                item.status = 1;
              }else{
                item.status = 3;
              }
            }
          })
        }
      })

    },
    handTransferDepositQuery(item){
      transferDepositQuery(this.form).then(res=>{
        this.loading = false;
        if(res.code === 200){
          let resData = res.data
          if (resData.code === "0000"){
            item.status = 1;
          }else{
            item.status = 3;
          }
        }
      })
    },
    submit(index,row){
      this.loading = true;
      if (index === 0){
        transferDepositOpen(this.form).then(res=>{
          this.loading = false;
          if(res.code === 200){
            let resData = res.data
            if (resData.code === "0000"){
              row.status = 1;
            }else{
              row.status = 3;
            }
          }
        })
      }else{
        let query = {
          cardType:row.cardType,
          settlementCycle:row.settlementCycle,
          subMerchantNo:this.form.subMerchantNo,
        }
        transferSetting(query).then(res=>{
          this.loading = false;
          if(res.code === 200){
            let resData = res.data
            if (resData.code === "0000"){
              row.status = 1;
            }else{
              row.status = 3;
            }
          }
        })
      }
    },
    close() {
      this.$emit("close", false, isRefresh)
    },
  },
  watch: {
    opens: {
      handler(val) {
        this.open = val
        this.form = this.formData
        this.getDetail()
      },
      deep: true,
      immediate: true
    },
  }
}

</script>
<style scoped lang="scss">

</style>
